import React,{Component,View,Text,StyleSheet,TouchableNativeFeedback} from 'react-native';

export default class dayRecord extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }
  render() {
    var {Actual,Amount,Date}=this.props.rowData;
    //console.log(this.props.maxAmount);
    var tipColor;//正常的提示颜色为绿色
    var tipText;//文字提示
    if(Actual/Amount*100 < 30){//如果吃料量小于百分30
      tipColor='#EC5A7D';
      tipText='过少'
    }else if (Actual/Amount*100 < 60) {
      tipColor='#F6B235';
      tipText="警戒"
    }else{
      tipColor='#5ABF15';
      tipText="正常"
    };

    return (
    	<TouchableNativeFeedback onPress={this._onPressButton}>
    	<View style={styles.contain}>
    		<View style={styles.left}>
          {/*显示正常或者不正常*/}
          <View style={[styles.showstate,{backgroundColor:tipColor}]}>
            <Text style={styles.showstateText}>{tipText}</Text>
          </View>
    		</View>
    		<View style={styles.right}>
          <View style={styles.rightTop}>
            <Text style={[styles.rightTopText]}>{Actual}克/{Amount}克</Text>
            <Text style={styles.rightTopText}>{/*2016-04-19*/}{Date}</Text>
            <Text style={[styles.rightTopText,{color:tipColor}]}>{(Actual/Amount*100).toFixed(2)}%</Text>
          </View>
          {/*显示进度条*/}
          <View style={styles.rightBottom}>
            <View style={[styles.progressBar,{flex:(Actual+1)}]}>
            </View>
            <View style={[styles.percent,{flex:(Amount-Actual+1)}]}>
            </View>
            <View style={{flex:(this.props.maxAmount-Amount+1)}}>
            </View>
          </View>
    		</View>
    	</View>
    	</TouchableNativeFeedback>
    );
  }
}

var styles = StyleSheet.create({
  contain:{
    flex: 1,
    //height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    paddingLeft: 2,
    paddingRight:2,
    paddingBottom: 2,
    paddingTop:10,
    //marginLeft: 8,
   // marginRight: 8,
   //marginVertical: 5,
    //安卓shadow
    //elevation:10,
    //borderRadius:4,
    borderColor:'#dddddd',
    borderWidth:1
  },
  left:{
  	flex:1,
  	//backgroundColor:'yellow',
  	flexDirection:'column',
  	justifyContent:'center',
  	alignItems:'center',
  	borderRightWidth:1,
  	borderRightColor:"#CBC5C5"
  },
  showstate:{
    flex:1,
    //backgroundColor:'#5ABF15',
    width:30,
    height:30,
    borderRadius:15,
    justifyContent:'center',
    alignItems:'center'
  },
  showstateText:{
    fontSize:13,
    color:'white',
    textAlign:'center'
  },
  right:{
  	flex:7,
  	paddingLeft:7,
  	//backgroundColor:'green',
  },
  rightTop:{
    flex:3,
    justifyContent:'space-around',
    flexDirection:'row',
    marginBottom:7
  },
  rightTopText:{
    fontSize:14
  },
  rightBottom:{
    flex:1,
    height:3,
    //backgroundColor:'#D5D1D1',
    flexDirection:'row',
    marginRight:6
  },
  progressBar:{
    //flex:50,
    paddingLeft:1,
    backgroundColor:'#113477',
    alignSelf:'stretch',
    borderRadius:3
  },
  percent:{
    backgroundColor:'#D5D1D1',
  }
});
